<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VSelect v-model="form.platform_id" placeholder="平台" :options="options.platform" multiple collapse-tags style="min-width: 160px" />
        <VSelect v-model="form.statuses[0]" placeholder="启用状态" :options="options.status" style="min-width: 160px" @change="({value}) => !value && (form.statuses = [])" />
        <VSelect v-model="form.api_statuses[0]" placeholder="API对接状态" :options="options.api_status" style="min-width: 160px" @change="({value}) => !value && (form.api_statuses = [])" />
        <VGroup>
          <el-select v-model="form.input.type" style="width: 100px">
            <el-option label="平台代码" value="platform_code"></el-option>
          </el-select>
          <el-input v-model="form.input.value" placeholder="请输入" class="w-60" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <el-button type="primary" @click="create(tableRef)">添加平台</el-button>
        <el-button @click="create(tableRef)">批量启用</el-button>
        <el-button @click="create(tableRef)">批量禁用</el-button>
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'

const baseName = 'platform'
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 获取options
const options = ref({})
Promise.all([
  getOption({ type: 'site' }).then(res => res.data),
  getOption({ type: baseName }).then(res => res.data),
  Promise.resolve({ test: [{ label: '没有数据', value: 1 }] })
]).then(res => {
  options.value = res.reduce((acc, cur) => (((acc = { ...acc, ...cur }), acc)), {})
})

// 单行操作
const handleRow = (name, row, rowIndex) => {
  const { platform_id } = row
  const showLoading = (name = 'handle') => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = (name = 'handle') => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    edit: () => {
      addRef?.value.open(platform_id)
    },
    status2: () => {
      ElMessageBox.confirm(`确定禁用${row.platform_name}平台吗？`, '禁用提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then(() => {
          showLoading()
          api.status({ platform_ids: [row.platform_id],status: 2 }).then(res => {
            ElMessage({ type: 'success', message: '平台已禁用', })
            query()
          }).finally(closeLoading)
        })
        .catch(() => {
          ElMessage({ type: 'info', message: '取消操作', })
        })
    },
    status1: () => {
      showLoading()
      api.status({ platform_ids: [row.platform_id],status: 1 }).then(res => {
        ElMessage({ type: 'success', message: '平台已启用', })
        query()
      }).finally(closeLoading)
    }
  }
  handle[name]()
}

const auths = {
  1: 'ebay',
  2: 'amazon',
  3: 'otto',
  4: 'walmart',
  99: 'other',
}

// 列表配置
const tableOptions = reactive({
  showOverflow: false,
  showHeaderOverflow: false,
  formConfig: {
    data: {
      statuses: [],
      api_statuses: [],
      input: { type: 'platform_code', value: '' }, // 组合
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    { title: '平台ID', field: 'platform_id', minWidth: 100 },
    { title: '平台名称', field: 'platform_name', minWidth: 150 },
    { title: '平台Logo', field: 'platform_logo', minWidth: 100, slots: {
      default: ({row}) => <VImage src={row.platform_logo[0]} size='46px' />
    } },
    { title: '平台代码', field: 'platform_code', minWidth: 150 },
    { title: '站点数量', field: 'site_num', minWidth: 100 },
    { title: '启用状态', field: 'status', minWidth: 100, slots: {
        default: ({ row }) => <VStatus status={row.status === 1} />
      }
    },
    { title: 'api对接状态', field: 'api_status', minWidth: 100, slots: {
        default: ({ row }) => <VStatus status={row.api_status === 1} trueLabel='已接入' falseLabel='未接入' />
      } },
    {
      title: '操作', width: 120, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          return <div>
            <VButton auth='/base/site/edit' link type="primary" onClick={() => handleRow('edit', row)}>编辑</VButton>
            {row.status === 1 ? <VButton auth='/base/site/status' link type='danger' onClick={() => handleRow('status2', row, rowIndex)}>禁用</VButton> :
            <VButton auth='/base/site/status' link type='primary' onClick={() => handleRow('status1', row, rowIndex)}>启用</VButton>}
          </div>
        }
      }
    }
  ],
  proxyConfig: {
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  